<template>
  <view
    class="hb-px-4 hb-bg-white hb-h-7 hb-rounded-2xl hb-box-shadow-base hb-flex hb-items-center hb-justify-center hb-gap-2"
    @click="emit('click')"
  >
    <view
      class="hb-bg-primary hb-w-4 hb-h-4 hb-flex hb-items-center hb-justify-center"
      style="border-radius: 8rpx"
    >
      <text class="ali-icon hb-text-xs hb-text-white">&#xe68a;</text>
    </view>
    <TmText _class="hb-whitespace-nowrap" :label="text" color="primary" :font-size="28" />
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';

  defineProps({
    text: propTypes.string.def(''),
  });

  const emit = defineEmits(['click']);
</script>

<style scoped></style>
